﻿@page "/circular-gauge/tooltip"

@using Syncfusion.Blazor.CircularGauge
@using Newtonsoft.Json;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the tooltip of pointer value and range value in circular gauge.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to show the tooltip for a pointer in a circular gauge. To see the tooltip in action, hover pointer or tap on the pointer in touch-enabled devices.</p>
   <p>More information on the tooltip can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/user-interaction/#showing-tooltip-at-mouse-position'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfCircularGauge EnablePointerDrag="true" Title="Tooltip">
        <CircularGaugeTitleStyle Size="15px" Color="grey"/>
        <CircularGaugeAxes>
            <CircularGaugeAxis StartAngle="240" EndAngle="120" Minimum="0" Maximum="120" Radius="90%">
                <CircularGaugeAxisLabelStyle UseRangeColor="true"/>
                <CircularGaugeAxisLineStyle Width="0.01"/>
                <CircularGaugeAxisMajorTicks Height="12" Offset="-5" Color="white"/>
                <CircularGaugeAxisMinorTicks Width="0.01"/>
                <CircularGaugePointers>
                    <CircularGaugePointer Value=70 Radius="60%" Color="#33BCBD">
                        <CircularGaugePointerAnimation Enable="true" Duration="1500"/>
                        <CircularGaugeCap Radius="10">
                            <CircularGaugeCapBorder Color="#33BCBD" Width="5"/>
                        </CircularGaugeCap>
                    </CircularGaugePointer>
                </CircularGaugePointers>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="0" End="50" Radius="102%" Color="#3A5DC8" StartWidth="10" EndWidth="10"/>
                    <CircularGaugeRange Start="50" End="120" Radius="102%" Color="#33BCBD" StartWidth="10" EndWidth="10"/>
                </CircularGaugeRanges>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
        <CircularGaugeTooltipSettings Enable="true" EnableAnimation="false" Type="@Type" Format="N2"/>
    </SfCircularGauge>
</div>

@code {
    private string[] Type = { "Pointer", "Range" };
}